<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getFeedbackList, submitFeedbackReply } from '@/api/user.js';

const feedbackList = ref([])
const dialogVisible = ref(false)
const currentFeedback = ref(null)
const replyContent = ref('')

const getFeedbackData = async () => {
  const result = await getFeedbackList()
  feedbackList.value = result.data
}

const handleReply = (row) => {
  currentFeedback.value = row
  dialogVisible.value = true
}

const submitReply = async () => {
  try {
    await submitFeedbackReply(
      currentFeedback.value.feedbackId, 
      replyContent.value
    )
    ElMessage.success('回复提交成功')
    dialogVisible.value = false
    replyContent.value = ''
    // Refresh feedback list
    await getFeedbackData()
  } catch (error) {
    ElMessage.error('回复提交失败')
    console.error('Error submitting reply:', error)
  }
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  return dateString.replace('T', ' ').replace(/\.\d{3}\+\d{2}:\d{2}$/, '')
}

getFeedbackData()
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>用户反馈</span>
      </div>
    </template>
    <el-table :data="feedbackList" style="width: 100%">
      <el-table-column label="反馈ID" prop="feedbackId"></el-table-column>
      <el-table-column label="用户名" prop="userName"></el-table-column>
      <el-table-column label="反馈类型" prop="type"></el-table-column>
      <el-table-column label="反馈内容" prop="content"></el-table-column>
      <el-table-column label="联系电话" prop="phone"></el-table-column>
      <el-table-column label="状态">
        <template #default="{row}">
          {{ row.status === 1 ? '处理中' : '已处理' }}
        </template>
      </el-table-column>
      <el-table-column label="反馈时间">
        <template #default="{row}">
          {{ formatDate(row.commentTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{row}">
          <el-button 
            v-if="row.status === 1" 
            type="primary" 
            size="small"
            @click="handleReply(row)"
          >
            回复
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>

    <el-dialog v-model="dialogVisible" title="回复反馈">
      <el-form>
        <el-form-item label="反馈内容">
          <el-input :value="currentFeedback ? currentFeedback.content : ''" readonly></el-input>
        </el-form-item>
        <el-form-item label="回复内容">
          <el-input 
            v-model="replyContent" 
            type="textarea" 
            :rows="4"
            placeholder="请输入回复内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitReply">提交</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>
